<template>
  <view class="profile-container">
    <view class="avatar-section">
      <image :src="userInfo.avatar || '/static/images/profile.jpg'" class="avatar" @click="changeAvatar" />
      <text class="change-tip">点击更换头像</text>
    </view>

    <view class="info-section">
      <view class="info-item">
        <text class="label">姓名</text>
        <input v-model="userInfo.name" class="input" placeholder="请输入姓名" />
      </view>
      
      <view class="info-item">
        <text class="label">性别</text>
        <picker :range="genderOptions" :value="genderIndex" @change="onGenderChange">
          <view class="picker">{{ genderOptions[genderIndex] }}</view>
        </picker>
      </view>
      
      <view class="info-item">
        <text class="label">年龄</text>
        <input v-model="userInfo.age" type="number" class="input" placeholder="请输入年龄" />
      </view>
      
      <view class="info-item">
        <text class="label">身高</text>
        <view class="input-group">
          <input v-model="userInfo.height" type="digit" class="input" placeholder="请输入身高" />
          <text class="unit">cm</text>
        </view>
      </view>
      
      <view class="info-item">
        <text class="label">体重</text>
        <view class="input-group">
          <input v-model="userInfo.weight" type="digit" class="input" placeholder="请输入体重" />
          <text class="unit">kg</text>
        </view>
      </view>
      
      <view class="info-item">
        <text class="label">职业</text>
        <picker :range="occupationOptions" :value="occupationIndex" @change="onOccupationChange">
          <view class="picker">{{ occupationOptions[occupationIndex] }}</view>
        </picker>
      </view>
      
      <view class="info-item">
        <text class="label">活动水平</text>
        <picker :range="activityOptions" :value="activityIndex" @change="onActivityChange">
          <view class="picker">{{ activityOptions[activityIndex] }}</view>
        </picker>
      </view>
      
      <view class="info-item">
        <text class="label">健康状况</text>
        <picker :range="healthOptions" :value="healthIndex" @change="onHealthChange">
          <view class="picker">{{ healthOptions[healthIndex] }}</view>
        </picker>
      </view>
    </view>

    <button class="save-btn" @click="saveProfile">保存信息</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: '张三',
        avatar: '',
        age: '25',
        height: '170',
        weight: '65',
      },
      genderOptions: ['男', '女'],
      genderIndex: 0,
      occupationOptions: ['学生', '程序员', '教师', '医生', '销售', '其他'],
      occupationIndex: 1,
      activityOptions: ['轻度活动', '中度活动', '重度活动'],
      activityIndex: 0,
      healthOptions: ['健康', '高血压', '糖尿病', '高血脂', '其他'],
      healthIndex: 0
    }
  },
  methods: {
    changeAvatar() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.userInfo.avatar = res.tempFilePaths[0]
        }
      })
    },
    
    onGenderChange(e) {
      this.genderIndex = e.detail.value
    },
    
    onOccupationChange(e) {
      this.occupationIndex = e.detail.value
    },
    
    onActivityChange(e) {
      this.activityIndex = e.detail.value
    },
    
    onHealthChange(e) {
      this.healthIndex = e.detail.value
    },
    
    saveProfile() {
      uni.showToast({
        title: '保存成功',
        icon: 'success'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.profile-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.avatar-section {
  background: white;
  border-radius: 16rpx;
  padding: 40rpx;
  margin-bottom: 20rpx;
  text-align: center;
}

.avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  margin-bottom: 20rpx;
}

.change-tip {
  font-size: 24rpx;
  color: #666;
}

.info-section {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
}

.label {
  font-size: 28rpx;
  color: #333;
  width: 120rpx;
}

.input {
  flex: 1;
  text-align: right;
  font-size: 28rpx;
  color: #333;
}

.input-group {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
}

.unit {
  font-size: 24rpx;
  color: #666;
  margin-left: 10rpx;
}

.picker {
  color: #1890ff;
  font-size: 28rpx;
}

.save-btn {
  width: 100%;
  height: 80rpx;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 40rpx;
  font-size: 32rpx;
}
</style>